<template>
  <div class="order-list">
    <van-search v-model="searchValue" class="order-search-bar" shape="round" show-action v-if="searchVisible"
                placeholder="请输入商品名"
                @cancel="searchVisible = !searchVisible"
                @search="handleSearch"/>
    <van-nav-bar left-arrow fixed placeholder :border="false" title="我的订单"
                 @click-left="$router.back()"
                 @click-right="searchVisible = !searchVisible" v-else>
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeTab" sticky swipeable animated>
      <van-tab v-for="tab in statusTabs" :key="tab.name" :title="tab.title" :name="tab.name">
        <white-space/>
        <order-list v-if="activeTab === tab.name" :name="name"
                    :statuses="statuses"
                    :review-statuses="reviewStatuses"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import * as _ from "lodash"
import { Icon, NavBar, Search, Tab, Tabs } from "vant"
import OrderList from "@/components/order/OrderList"
import WhiteSpace from "@/components/WhiteSpace"
import {
  awaitingFulfillmentStatuses,
  awaitingPaymentStatuses,
  awaitingPickupStatuses,
  awaitingReviewStatuses,
  completedStatuses,
} from "@/utils/order"

function createStatusTab(title, statuses) {
  return { name: title, title, statuses }
}

const statusTabs = [
  createStatusTab("全部", []),
  createStatusTab("待付款", awaitingPaymentStatuses),
  createStatusTab("待发货", awaitingFulfillmentStatuses),
  createStatusTab("待收货", awaitingPickupStatuses),
  createStatusTab("待评论", completedStatuses),
  // createStatusTab("售后", [OrderStatus.AwaitingFulfillment]),
]


export default {
  name: "OrderListView",
  components: {
    WhiteSpace,
    OrderList,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  props: {
    statuses: Array,
    reviewStatuses: Array,
  },
  computed: {
    activeTab: {
      get() {
        const { statuses } = this
        const statusTab = _.find(statusTabs, aStatusTab => _.isEqual(aStatusTab.statuses, statuses))
        return _.isUndefined(statusTab) ? "全部" : statusTab.name
      },
      set(activeTab) {
        const statusTab = _.find(statusTabs, aStatusTab => _.isEqual(aStatusTab.name, activeTab))
        const statuses = _.isUndefined(statusTab) ? [] : statusTab.statuses
        const oldStatuses = _.isEmpty(this.$route.query.statuses) ? [] : _.split(this.$route.query.statuses, ",")
        if (!_.isEqual(oldStatuses, statuses)) {
          const reviewStatues = _.isEqual(completedStatuses, statuses) ? awaitingReviewStatuses : []
          this.$router.replace({
            path: `/orders`,
            query: {
              ...(_.isEmpty(statuses) ? {} : { statuses: _.join(statuses, ",") }),
              ...(_.isEmpty(reviewStatues) ? {} : { review_statuses: _.join(reviewStatues, ",") }),
            },
          })
        }
      },

    },
  },
  data() {
    return {
      statusTabs,
      searchVisible: false,
      searchValue: "",
      name: "",
    }
  },
  methods: {
    handleSearch(value) {
      this.name = value
    },
  },
}
</script>

<style lang="scss" scoped>
.order-list {
  .order-search-bar {
    padding: 6px 12px;
  }
}
</style>
